<!-- 公共组件-图标文字 -->
<template>
	<!-- 主体 -->
	<view :class="{'flex-bothends': !props.isVertical}">
		<!-- 图标左方文字 -->
		<view :style="props.textStyle" v-if="!props.isVertical && !isTextEnd">{{ props.text }}</view>
		<!-- 图标 -->
		<tm-icon :name="props.icon" :color="props.iconColor" :fontSize="props.iconSize" style="margin: 0 4rpx;"></tm-icon>
		<!-- 图标右方文字 -->
		<view :style="props.textStyle" v-if="!props.isVertical && isTextEnd">{{ props.text }}</view>
		<!-- 图标下方文字 -->
		<view :style="props.textStyle" v-if="props.isVertical">{{ props.text }}</view>
	</view>
</template>
<script lang="ts" setup>
	import {ref, reactive, onMounted} from "vue";

	// ------------------接收传入参数(组件)-------------------
	const props = defineProps({
		// 文字
		text: {
		  type: String,
		  default: "示例文字",
		},
		// 文字样式
		textStyle: {
			type: String,
			default: "",
		},
		// 图标
		icon: {
		  type: String,
		  default: "tmicon-check-circle",
		},
		// 图标尺寸
		iconSize: {
			type: Number,
			default: 24,
		},
		// 图标颜色
		iconColor: {
			type: String,
			default: "",
		},
		// 文字是否在图标后
		isTextEnd: {
			type: Boolean,
			default: true
		},
		// 文字与图标是否垂直排列
		isVertical: {
			type: Boolean,
			default: false
		}
	})
	// ------------------钩子函数----------------------------
	// 初始化
	onMounted(() => {})

	// ------------------变量区------------------------------
	// 主数据
	const data = reactive({
		
	})

	// ------------------方法区------------------------------
</script>
<style lang="scss" scoped></style>